describe('前端UI交互测试 - 真实页面操作', () => {
  let testData

  before(() => {
    cy.fixture('test-data').then((data) => {
      testData = data
    })
    
    // 准备测试数据
    cy.setupTestDatabase()
  })

  beforeEach(() => {
    cy.clearLocalStorage()
    // 修正前端访问地址
    cy.visit('http://localhost:8002', { failOnStatusCode: false })
    cy.wait(3000) // 等待UniApp页面完全加载
  })

  describe('🏠 首页和导航测试', () => {
    it('应该能够加载首页并导航到菜单', () => {
      // 检查页面是否加载
      cy.get('body').should('exist')
      cy.url().should('include', 'localhost:8002')
      
      // 查找并点击菜单项（UniApp的页面结构）
      cy.get('body').then(($body) => {
        if ($body.find('.menu-item, .nav-item, [class*="menu"]').length > 0) {
          cy.get('.menu-item, .nav-item, [class*="menu"]').first().click()
          cy.wait(2000)
          cy.log('✅ 成功点击菜单项')
        } else {
          // 直接导航到选择页面
          cy.visit('http://localhost:8002/#/pages/select/select')
          cy.wait(2000)
          cy.log('✅ 直接导航到选择页面')
        }
      })
    })
  })

  describe('📝 订单输入和验证测试', () => {
    it('应该能够输入订单号并验证', () => {
      // 导航到选择页面
      cy.visit('http://localhost:8002/#/pages/select/select')
      cy.wait(3000)
      
      // 查找订单输入框
      cy.get('body').then(($body) => {
        const inputSelectors = [
          'input[placeholder*="订单"]',
          'input[placeholder*="扫描"]',
          'input[type="text"]',
          '.input-field input',
          '.scan-input'
        ]
        
        let inputFound = false
        for (const selector of inputSelectors) {
          if ($body.find(selector).length > 0) {
            cy.get(selector).first().clear().type(testData.orders.valid.fullScanCode)
            inputFound = true
            cy.log(`✅ 找到输入框: ${selector}`)
            break
          }
        }
        
        if (!inputFound) {
          cy.log('⚠️ 未找到订单输入框，跳过输入测试')
          return
        }
        
        // 查找并点击开始按钮
        const buttonSelectors = [
          '.btn-start',
          'button[class*="start"]',
          'button[class*="begin"]',
          'button:contains("开始")',
          'button:contains("确认")',
          '.button'
        ]
        
        for (const selector of buttonSelectors) {
          if ($body.find(selector).length > 0) {
            cy.get(selector).first().click()
            cy.wait(3000)
            cy.log(`✅ 点击按钮: ${selector}`)
            break
          }
        }
        
        // 验证页面跳转或状态变化
        cy.url().then((url) => {
          cy.log(`📍 当前页面: ${url}`)
        })
      })
    })

    it('应该处理无效订单号输入', () => {
      cy.visit('http://localhost:8002/#/pages/select/select')
      cy.wait(3000)
      
      cy.get('body').then(($body) => {
        if ($body.find('input').length > 0) {
          cy.get('input').first().clear().type(testData.orders.invalid.fullScanCode)
          
          if ($body.find('button, .btn-start').length > 0) {
            cy.get('button, .btn-start').first().click()
            cy.wait(2000)
            
            // 应该显示错误信息或保持在当前页面
            cy.get('body').should('exist')
            cy.log('✅ 处理了无效订单号输入')
          }
        }
      })
    })
  })

  describe('👨‍🔧 作业员确认测试', () => {
    it('应该能够输入作业员ID并验证', () => {
      // 如果有作业员确认页面
      cy.visit('http://localhost:8002/#/pages/operator-confirm/operator-confirm')
      cy.wait(3000)
      
      cy.get('body').then(($body) => {
        if ($body.find('input').length > 0) {
          cy.get('input').first().clear().type(testData.operators.valid.operatorId)
          
          if ($body.find('button, .btn-start').length > 0) {
            cy.get('button, .btn-start').first().click()
            cy.wait(2000)
            
            // 验证作业员信息显示
            cy.get('body').should('contain.text', testData.operators.valid.operatorId)
            cy.log('✅ 作业员确认测试完成')
          }
        } else {
          cy.log('⚠️ 页面可能还在加载或结构不同')
        }
      })
    })
  })

  describe('📦 物料扫描测试', () => {
    it('应该能够模拟物料扫描操作', () => {
      // 导航到物料配送确认页面
      cy.visit('http://localhost:8002/#/pages/delivery-confirm/delivery-confirm')
      cy.wait(3000)
      
      cy.get('body').then(($body) => {
        // 查找隐藏的扫描输入框
        if ($body.find('.hidden-input, input[style*="hidden"]').length > 0) {
          cy.get('.hidden-input, input[style*="hidden"]').first()
            .type(testData.parts.valid[0].scanCode + '{enter}')
          cy.wait(1000)
          cy.log('✅ 模拟扫描第一个物料')
          
          // 扫描第二个物料
          cy.get('.hidden-input, input[style*="hidden"]').first()
            .type(testData.parts.valid[1].scanCode + '{enter}')
          cy.wait(1000)
          cy.log('✅ 模拟扫描第二个物料')
          
        } else if ($body.find('input').length > 0) {
          // 如果没有隐藏输入框，使用普通输入框
          cy.get('input').first().type(testData.parts.valid[0].scanCode)
          cy.log('✅ 使用普通输入框模拟扫描')
        } else {
          cy.log('⚠️ 未找到扫描输入框')
        }
        
        // 验证扫描结果显示
        cy.get('body').should('exist')
        cy.wait(1000)
      })
    })

    it('应该显示扫描状态和进度', () => {
      cy.visit('http://localhost:8002/#/pages/delivery-confirm/delivery-confirm')
      cy.wait(3000)
      
      // 检查状态显示元素
      cy.get('body').then(($body) => {
        const statusSelectors = [
          '.status-indicator',
          '.progress-info',
          '.scan-status',
          '[class*="status"]',
          '[class*="progress"]'
        ]
        
        statusSelectors.forEach(selector => {
          if ($body.find(selector).length > 0) {
            cy.get(selector).should('exist')
            cy.log(`✅ 找到状态元素: ${selector}`)
          }
        })
      })
    })
  })

  describe('💾 本地存储和缓存测试', () => {
    it('应该正确处理本地存储操作', () => {
      cy.visit('http://localhost:8002/#/pages/select/select')
      cy.wait(3000)
      
      // 模拟设置缓存数据
      cy.window().then((win) => {
        if (win.uni && win.uni.setStorageSync) {
          win.uni.setStorageSync('testOrderData', {
            orderNo: testData.orders.valid.orderNo,
            machineId: testData.orders.valid.machineId,
            operatorId: testData.operators.valid.operatorId
          })
          cy.log('✅ 设置本地存储成功')
          
          // 验证存储数据
          const storedData = win.uni.getStorageSync('testOrderData')
          expect(storedData.orderNo).to.equal(testData.orders.valid.orderNo)
          cy.log('✅ 本地存储验证成功')
        } else {
          cy.log('⚠️ UniApp存储API不可用')
        }
      })
    })

    it('应该处理缓存数据的页面间传递', () => {
      // 在选择页面设置数据
      cy.visit('http://localhost:8002/#/pages/select/select')
      cy.wait(2000)
      
      cy.window().then((win) => {
        if (win.uni && win.uni.setStorageSync) {
          win.uni.setStorageSync('smtOrderData', {
            orderNo: testData.orders.valid.orderNo,
            machineId: testData.orders.valid.machineId
          })
        }
      })
      
      // 导航到其他页面验证数据传递
      cy.visit('http://localhost:8002/#/pages/operator-confirm/operator-confirm')
      cy.wait(2000)
      
      cy.window().then((win) => {
        if (win.uni && win.uni.getStorageSync) {
          const cachedData = win.uni.getStorageSync('smtOrderData')
          if (cachedData && cachedData.orderNo) {
            expect(cachedData.orderNo).to.equal(testData.orders.valid.orderNo)
            cy.log('✅ 缓存数据页面间传递成功')
          }
        }
      })
    })
  })

  describe('📱 移动端特性测试', () => {
    it('应该支持移动端视口和交互', () => {
      cy.viewport(375, 667) // 移动端视口
      cy.visit('http://localhost:8002')
      cy.wait(3000)
      
      // 检查页面在移动端视口下的显示
      cy.get('body').should('be.visible')
      
      // 模拟触摸事件（如果支持）
      cy.get('body').then(($body) => {
        if ($body.find('.touchable, button, .btn').length > 0) {
          cy.get('.touchable, button, .btn').first().should('be.visible')
          cy.log('✅ 移动端交互元素可见')
        }
      })
    })

    it('应该处理设备横竖屏切换', () => {
      // 竖屏模式
      cy.viewport(375, 667)
      cy.visit('http://localhost:8002')
      cy.wait(2000)
      cy.log('📱 竖屏模式测试')
      
      // 横屏模式
      cy.viewport(667, 375)
      cy.wait(1000)
      cy.get('body').should('be.visible')
      cy.log('📱 横屏模式测试')
      
      // 恢复竖屏
      cy.viewport(375, 667)
      cy.log('✅ 横竖屏切换测试完成')
    })
  })
})